<nz-card>

  <nz-table #table [nzShowPagination]="false" nzBordered [nzData]="tableData"
            [nzPageSize]="9999" [nzScroll]="{ y: '840px' }">
    <thead>
    <tr>
      <th nzAlign="center" nzWidth="100px">序号</th>
      <th nzAlign="center" nzWidth="100px">类型</th>
      <th nzAlign="center" nzWidth="200px">平台</th>
      <th nzAlign="center" nzWidth="700px">会员</th>
      <th nzAlign="center" nzWidth="120px">PC端B端图片</th>
      <th nzAlign="center" nzWidth="120px">PC端C端图片</th>
      <th nzAlign="center" nzWidth="120px">移动端B端图片</th>
      <th nzAlign="center" nzWidth="120px">移动端C端图片</th>
      <th nzAlign="center" nzWidth="80px">状态</th>
      <th nzAlign="center" nzWidth="180px" nzRight>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of table.data;let index=index">
      <td nzAlign="center">{{ data['sort'] }}</td>
      <td nzAlign="center">{{ data['typeName'] }}</td>
      <td nzAlign="center">{{ data['brandName'] }}</td>
      <td>
        <div *ngFor="let member of data['goodsList']" class="memberList">
          <span>{{member['name']}}</span>
          <span>{{member['spec']}}</span>
          <span>官方价格：￥{{member['originalPrice']}}</span>
          <span>平台价格B端：￥{{member['priceB']}}</span>
          <span>平台价格C端：￥{{member['price']}}</span>
        </div>
      </td>
      <!-- PC端B端图片 -->
      <td nzAlign="center">
        <img nz-image width="80px" height="80px" [nzFallback]="errImg" [nzSrc]="data['pcImgB']"/>
      </td>
      <!-- PC端C端图片 -->
      <td nzAlign="center">
        <img nz-image width="80px" height="80px" [nzFallback]="errImg" [nzSrc]="data['pcImg']"/>
      </td>
      <!-- 移动端B端图片 -->
      <td nzAlign="center">
        <img nz-image width="80px" height="80px" [nzFallback]="errImg" [nzSrc]="data['phoneImgB']"/>
      </td>
      <!-- 移动端C端图片 -->
      <td nzAlign="center">
        <img nz-image width="80px" height="80px" [nzFallback]="errImg" [nzSrc]="data['phoneImg']"/>
      </td>
      <td nzAlign="center" [ngStyle]="{color: data['status'] === 0 ? '#27D525' : '#FF0000' }">{{ data['status'] === 0 ? '启用' : '禁用' }}</td>
      <td nzAlign="center" class="options" nzRight>
        <a (click)="move(data,1)" *ngIf="index!==0">上移</a>
        <a (click)="move(data,0)" *ngIf="index!==tableData.length-1">下移</a>
        <a [ngStyle]="{color: data['status'] === 0 ? '#FF0000' : '#27D525' }"
           (click)="changeStatus(data['id'],data['status'] === 0 ? 1 : 0)">{{data['status'] === 0 ? '禁用' : '启用'}}</a>
        <a (click)="showEdit(data)">编辑</a>
    </tr>
    </tbody>
  </nz-table>

  <!--编辑会员-->
  <nz-modal nzWidth="1200px"
            [nzVisible]="editModal.visible"
            [nzTitle]="editModal.brandName"
            (nzOnOk)="save()"
            (nzOnCancel)="hideEditModal()">
    <div *nzModalContent>

      <!-- <nz-row class="row">
        <span class="label required">状态</span>
        <nz-radio-group [(ngModel)]="editModal['status']">
          <label nz-radio [nzValue]="0">启用</label>
          <label nz-radio [nzValue]="1">禁用</label>
        </nz-radio-group>
      </nz-row>

      <nz-row class="row">
        <span class="label required selfTop">PC端图片</span>
        <app-image-upload style="width: 100px;"
                          [maxImgLength]="1"
                          [imageUrl]="editModal['pcImg']"
                          (deleteImg)="editModal['pcImg']=''"
                          (urlChange)="editModal['pcImg']=$event"></app-image-upload>
      </nz-row>
      <nz-row class="row">
        <span class="label required selfTop">移动端图片</span>
        <app-image-upload style="width: 100px;"
                          [maxImgLength]="1"
                          [imageUrl]="editModal['phoneImg']"
                          (deleteImg)="editModal['phoneImg']=''"
                          (urlChange)="editModal['phoneImg']=$event"></app-image-upload>
      </nz-row> -->
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>状态</nz-form-label>
        <nz-form-control nzFlex="1">
          <nz-radio-group [(ngModel)]="editModal['status']">
            <label nz-radio [nzValue]="0">启用</label>
            <label nz-radio [nzValue]="1">禁用</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <div nz-row>
        <div nz-col nzFlex="2">
          <nz-form-item>
            <nz-form-label nzFlex="120px" nzRequired>PC端B端图片</nz-form-label>
            <nz-form-control nzFlex="1">
              <zdy-upload
                uploadFileName="recharge-manage"
                [(ngModel)]="editModal['pcImgB']"
              ></zdy-upload>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzFlex="3">
          <nz-form-item>
            <nz-form-label nzFlex="120px" nzRequired>PC端C端图片</nz-form-label>
            <nz-form-control nzFlex="1">
              <zdy-upload
                uploadFileName="recharge-manage"
                [(ngModel)]="editModal['pcImgC']"
              ></zdy-upload>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <div nz-row>
        <div nz-col nzFlex="2">
          <nz-form-item>
            <nz-form-label nzFlex="120px" nzRequired>移动端B端图片</nz-form-label>
            <nz-form-control nzFlex="1">
              <zdy-upload
                uploadFileName="recharge-manage"
                [(ngModel)]="editModal['phoneImgB']"
              ></zdy-upload>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzFlex="3">
          <nz-form-item>
            <nz-form-label nzFlex="120px" nzRequired>移动端C端图片</nz-form-label>
            <nz-form-control nzFlex="1">
              <zdy-upload
                uploadFileName="recharge-manage"
                [(ngModel)]="editModal['phoneImgC']"
              ></zdy-upload>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <nz-divider></nz-divider>

      <nz-row class="row">
        <span class="label required">修改官方价和平台价</span>
      </nz-row>
      <nz-table #memberTable [nzShowPagination]="false" nzBordered [nzData]="editModal['goodsList']"
                [nzPageSize]="9999">
        <thead>
        <tr>
          <th nzAlign="center" nzWidth="100px">序号</th>
          <th nzAlign="center">类型</th>
          <th nzAlign="center">平台</th>
          <th nzAlign="center">会员</th>
          <th nzAlign="center">套餐</th>
          <th nzAlign="center" nzWidth="160px">官方价格(元)</th>
          <th nzAlign="center" nzWidth="160px">平台价格B端(元)</th>
          <th nzAlign="center" nzWidth="160px">平台价格C端(元)</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of memberTable.data;let index=index">
          <td nzAlign="center">{{index + 1}}</td>
          <td nzAlign="center">{{ editModal['typeName'] }}</td>
          <td nzAlign="center">{{ editModal['brandName'] }}</td>
          <td nzAlign="center">{{ data['name'] }}</td>
          <td nzAlign="center">{{ data['spec'] }}</td>
          <td nzAlign="center">
            <nz-input-number nzPlaceHolder="请输入" [nzMin]="0" [nzMax]="999999" nzPrecisionMode="cut" [nzPrecision]="2"
                             [(ngModel)]="data['originalPrice']"></nz-input-number>
          </td>
          <td nzAlign="center">
            <nz-input-number nzPlaceHolder="请输入" [nzMin]="0" [nzMax]="999999" nzPrecisionMode="cut" [nzPrecision]="2"
                             [(ngModel)]="data['priceB']"></nz-input-number>
          </td>
          <td nzAlign="center">
            <nz-input-number nzPlaceHolder="请输入" [nzMin]="0" [nzMax]="999999" nzPrecisionMode="cut" [nzPrecision]="2"
                             [(ngModel)]="data['price']"></nz-input-number>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </nz-modal>
</nz-card>
